<template>
	<view class="comment_box">
		<block v-for="(item,indexs) in orderDetail.goods" :key="indexs">
			<view class="header_goods_box flex">
				<view class="goods_image">
					<image class="w100 h100" :src="item.image_src" mode=""></image>
				</view>
				<view class="goods_detail_box">
					<view class="goods_name family f500 s26">
						{{item.title}}
					</view>
					<view class="goods_price family f500 s26">
						￥{{item.price}}
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="active_list_box">
				<view class="active_txt familytow fblod s26">
					其他用户还勾选了一下标签
				</view>
				<view class="listcon_box flex">
					<view :class="[listIndex == index ? 'list_box_active' : 'list_box','family','f500','s22','txtali']"
						v-for="(item,index) in list" :key="index" @click="active(index,indexs)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="comment_txt_box">
				<textarea class="input_box family s24" v-model="item.comment" placeholder="填写您的真实感受，可以帮助其他的小伙伴哦～"
					placeholder-class="s24 family placeholder_txt" />
				<view class="flex" style="flex-wrap: wrap;">
					<view class="img_list" v-for="(val,key) in item.imgList" :key="key">
						<view class="del_box familytow fblod s28 txtali" @click="del(indexs,key)">
							x
						</view>
						<image class="w100 h100" style="margin-top: -32upx;border-radius: 8upx;" :src="val" mode="aspectFill"></image>
					</view>
					<view class="add_image" @click="addImage(indexs)"></view>
				</view>
			</view>
		</block>
		<view class="line"></view>
		<view class="good_comment_box">
			<view class="comment_txt s26">
				给商品打个分吧
			</view>
			<view class="rate_box">
				<uni-rate v-model="value" @change="onChange" />
			</view>
		</view>
		<view class="submit_btn familytow fblod s28 txtali" @click="submit">
			提交
		</view>
		<view class="" style="height: 170rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 5,
				list: [{
						name: '好评'
					},
					{
						name: '中评'
					},
					{
						name: '差评'
					}
				],
				listIndex: 0,
				orderDetail: {},
				score: 0,
				iptVal: '',
			}
		},
		onLoad(options) {
			this.getOrderInfo(options.id)
		},
		methods: {
			submit() {
				let that = this,
					data = {
						order_id: that.orderDetail.id,
						shop: {
							id: that.orderDetail.shop_id,
							describe: that.score,
						},
						goodsList: that.orderDetail.goods,
						order_type: that.orderDetail.order_type
					};
				this.$request({
					url: 'order/commentOrder',
					method: 'POST',
					data: data
				}).then(res => {
					if(res.data.code==1){
						uni.showToast({
							title:'评价成功！',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					}else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			getOrderInfo(id) {
				let that = this
				that.$request({
					url: 'order/getOrderInfo',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.goods.forEach(item => {
							item.imgList = []
							item.comment = ''
							item.state = 0
						})
						that.orderDetail = res.data.data
					}
				})
			},
			addImage(inds) {
				let that = this
				this.$upLoadImages().then(res => {
					that.orderDetail.goods[inds].imgList.push(...res);
				})
			},
			del(inds,ind) {
				this.orderDetail.goods[inds].imgList.splice(ind,1)
			},
			onChange(e) {
				this.score = e.value
			},
			active(ind, inds) {
				this.listIndex = ind
				this.orderDetail.goods[inds].state = ind
			}
		}
	}
</script>

<style scoped lang="scss">
	.comment_box {
		overflow: hidden;
		padding: 32upx 32upx 0 32upx;
		box-sizing: border-box;

		.submit_btn {
			width: 686upx;
			height: 88upx;
			background-color: #EBBE87;
			border-radius: 50upx;
			line-height: 88upx;
			color: #ffffff;
			position: fixed;
			bottom: 80upx;
		}

		.header_goods_box {
			width: 686upx;
			height: 162upx;

			.goods_image {
				width: 162upx;
				height: 162upx;
				border-radius: 8upx;
				background-color: #666;
				overflow: hidden;
			}

			.goods_detail_box {
				margin-left: 20upx;

				.goods_name {
					width: 484upx;
					height: 70upx;
					letter-spacing: 0;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-top: 20upx;
					color: #000;
				}

				.goods_price {
					color: #000;
					margin-top: 12upx;
				}
			}
		}

		.line {
			width: 686upx;
			height: 2upx;
			margin-top: 30upx;
			background-color: rgba(244, 244, 244, 1);
		}

		.good_comment_box {
			margin-top: 34upx;

			.comment_txt {
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: 700;
				color: #000;
			}

			.rate_box {
				margin-top: 28upx;
			}

		}

		.comment_txt_box {
			width: 686upx;
			background-color: #F7F8FA;
			border-radius: 12upx;
			margin-top: 32upx;
			padding: 32upx;
			box-sizing: border-box;

			.img_list {
				width: 114upx;
				height: 114upx;
				background-color: #666;
				border-radius: 8upx;
				margin-right: 44upx;
				margin-bottom: 20upx;

				.del_box {
					width: 28upx;
					height: 28upx;
					background-color: #E84C4C;
					border: 2upx solid #FFFFFF;
					position: relative;
					top: -10upx;
					left: 96upx;
					border-radius: 50%;
					color: #fff;
					line-height: 22upx;
					z-index: 99;
				}
			}

			.input_box {
				width: 100%;
				height: 200upx;
				color: #000000;
			}

			.placeholder_txt {
				color: #A0A0A0;
			}

			.add_image {
				width: 114upx;
				height: 114upx;
				background-image: url('');
				background-size: 100% 100%;
			}
		}

		.active_list_box {
			margin-top: 32upx;

			.active_txt {
				color: #161616;
			}

			.listcon_box {
				margin-top: 28upx;
				flex-wrap: wrap;

				.list_box {
					padding: 0 32upx 0 32upx;
					background-color: #f4f4f4;
					border-radius: 26upx;
					line-height: 50upx;
					margin-right: 20upx;
					color: #626262;
				}

				.list_box_active {
					padding: 0 32upx 0 32upx;
					background-color: #EBBE87;
					border-radius: 26upx;
					line-height: 50upx;
					margin-right: 20upx;
					color: #ffffff;
				}
			}
		}
	}
</style>
